<template>
	<view class="big_box">
		<view class="list">
			<view class="list_item" v-for="item in listData" :key="item.id">
				<view class="left">
					<image :src="item.image" mode=""></image>
					<view class="sub_text">
						<view class="title">
							{{item.name}}
						</view>
						<view class="desc">
							{{item.descript}}
						</view>
					</view>
				</view>
				<u-button type="primary" class="custom-style" shape="circle" :plain="true"
					@click="go_add(item)">加好友</u-button>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="is_show" mode="center" closeable='true' :round="10" @close="close">
			<view class="pop_box">
				<view class="title">
					{{itemName}}
				</view>
				<image :src="wechat_image" mode=""></image>
				<text>长按二维码</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import api from '@/api/index.js'
	export default {
		data() {
			return {
				is_show:false,
				listData: [],
				itemName:'',
				wechat_image:'',
				page:1
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {
			this.getcustomerList();
		},
		methods: {
			//获取客服列表
			getcustomerList() {
				api.getcustomerList().then(res => {
					if(res.response.statusCode==200){
						this.listData=res.data.data
					}
				}).catch(err => {
					console.error(err)
				})
			},
			//加好友
			go_add(item) {
				console.log(item, '加好友')
				this.itemName=item.name
				this.is_show=true
				this.wechat_image=item.wechat_image
			},
			//关闭
			close() {
				this.is_show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-center-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	@mixin flex-center-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.big_box{
		padding: 1rem;
	}
	.list {
		display: flex;
		flex-direction: column;
		width: 100%;

		.list_item {
			@include flex-center-between;
			margin: .5rem 0;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 3rem;
					height: 3rem;
					border-radius: .8rem;
					margin-right: .2rem;
				}

				.title {
					font-size: 1rem;
					color: #191919;
				}

				.desc {
					font-size: .8rem;
					color: #7e7e7e;
				}
			}

			.custom-style {
				width: 5rem;
				height: 1.5rem;
				line-height: 1.5rem;
				font-size: .8rem;
				margin: 0;
			}
		}
	}
	.pop_box {
		width: 240px;
		@include flex-center-column;
		padding: 1rem;
		.title{
			font-size: 1rem;
		}
		image {
			width: 8rem;
			height: 8rem;
			margin: 1rem 0;
		}
	
		text {
			font-size: .8rem;
			color: #828181;
		}
	
	}
</style>